<template>
  <div>
    <!-- 表格 -->
    <!-- 表单 -->
    <el-button @click="addShow">添加</el-button>
    <el-dialog title="添加任务" :visible.sync="addDialogTableVisible" width="50%">
      <el-form :model="itemData" :rules="rules">
        <el-form-item label="任务名" :label-width="labelWidth" :rules="rules.taskName">
          <el-input v-model="itemData.taskName" style="width:80%" placeholder="请输入任务名"></el-input>
        </el-form-item>
        <div :style="{paddingLeft: labelWidth}">
          <span style="color: #e6a23c;font-size: 13px!important;">父任务：{{parentTime.startTime}} &nbsp;——&nbsp;{{parentTime.endTime}}</span>
          <ol :style="{paddingLeft: '30px', margin: '5px'}">
            <li v-for="item in children" style="color: #e6a23c;font-size: 12px!important;" :key="item.id">
              {{item.taskName}}： {{item.startTime}} &nbsp;——&nbsp;{{item.endTime}}
            </li>
          </ol>
        </div>
        <el-form-item label="任务周期" :label-width="labelWidth" :rules="rules.date">
          <el-date-picker v-model="dates" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间冲突" :label-width="labelWidth">
          <el-switch v-model="conflict" @change="dates = []; itemData.startTime = ''; itemData.endTime = ''" active-text="禁止" inactive-text="允许" />
        </el-form-item>
        <el-form-item label="持续时间" :label-width="labelWidth">
          <el-input v-model="itemData.totalTime" style="width:120px" :disabled="true">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="负责人" :label-width="labelWidth" :rules="rules.personInCharges">
          <el-input :value="itemData.personInCharges.join(' ')" @input="userInput" style="width:80%" placeholder="姓名用空格分隔"></el-input>
        </el-form-item>
          <el-form-item label="任务权重" :label-width="labelWidth" :rules="rules.weight">
          <el-input v-model="itemData.weight" style="width: 150px" placeholder="请输入权重"></el-input><span class="weight_info">权重为1-10之间</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { total_time, currentProcess, dataCopy } from '@/utils/GanttUtil'
import { addGanttData } from '@/utils/mockjs'
function initData() {
  return JSON.parse(JSON.stringify({
    id: '',
    taskName: '',
    startTime: '',
    endTime: '',
    totalTime: 0,
    personInCharges: [],
    parentId: '',
    rootId: '',
    grade: -1,
    actual_process: 0,
    children: [],
    predecessors: ''
  }))
}
export default {
  data() {
    return {
      hideList: {},
      addDialogTableVisible: false,
      itemData: initData(),
      dates: [],
      labelWidth: '80px',
      rules: {
        taskName: [{ required: true }],
        personInCharges: [{ required: true }],
        date: [{ required: true }],
      },
      parentTime: {},
      processDialogVisible: false,
      total_time,
      currentProcess,
      notes: '',
      process_notes: 0,
      children: [],
      conflict: true // 冲突
    }
  },
  methods: {
    async addItem(item) {
      item.rootId = item.id = new Date().getTime();
      item.grade = 0;
      const data = await addGanttData(item);
      console.log(data);
    },
    tolgger(id) {
      // console.log(!!this.hideList[id]);
      this.hideList[id] = !this.hideList[id];
      this.$forceUpdate();
      this.listChange(id);
    },
    // 显示添加任务
    addShow(item) {
      this.addDialogTableVisible = true;
    },
    // 添加函数
    add() {
      if (this.itemData.taskName.trim() == '') return this.$message({ message: '任务名不能为空', type: 'warning' });
      if (this.itemData.startTime.trim() == '') return this.$message({ message: '开始/结束时间不能为空', type: 'warning' });
      if (this.itemData.personInCharges.length === 0) return this.$message({ message: '至少有一个人负责任务', type: 'warning' });
      this.addItem(this.itemData);
      this.cancelAdd();
    },
    // 取消添加
    cancelAdd() {
      this.addDialogTableVisible = false;
      this.itemData = initData();
      this.dates = [];
    },
    // 日期变化时
    dateChange() {
      const selfStartDate = new Date(this.dates[1]).getTime();
      // console.log(this.children.some(item => new Date(item.endTime).getTime() > selfStartDate));
      // 判断任务与父任务
      let timeRangecheck = this.timeRangecheck({ startTime: this.dates[0], endTime: this.dates[1] });
      if (timeRangecheck) {
        this.dates = [];
        return this.$message({ message: timeRangecheck, type: 'warning' });
      }
      if (this.conflict && this.children.some(item => new Date(item.endTime).getTime() > selfStartDate)) {
        this.$message({ message: '任务时间不能重叠', type: 'warning' });
        this.dates = [];
        return;
      }
      this.itemData.startTime = this.dates[0];
      this.itemData.endTime = this.dates[1];
      this.itemData.totalTime = this.total_time(this.dates[0], this.dates[1]);
    },
    // 添加负责人
    userInput(item) {
      // console.log(item);
      this.itemData.personInCharges = item.split(' ');
      console.log(this.itemData.personInCharges);
    },
    // 校验时间不能大于父项目的时间
    timeRangecheck(self) {
      if (new Date(this.parentTime.startTime) > new Date(self.startTime)) return '任务的开始时间不能小于父任务的开始时间';
      if (new Date(this.parentTime.endTime) < new Date(self.endTime)) return '任务的结束时间不能大于父任务的结束时间';
      return '';
    },
    // 进度修改
    progressEditShow(item) {
      // console.log(item);
      this.processDialogVisible = true
      this.itemData = dataCopy(item);
      this.process_notes = dataCopy(item.actual_process);
    },
    // 确定修改
    progressEdit() {
      if (this.notes.trim() === '') return this.$message({ message: '完成的进度说明不能为空', type: 'warning' });
      this.editProcess(this.itemData);
      this.cancelEdit()
    },
    // 取消修改
    cancelEdit() {
      this.processDialogVisible = false;
      this.itemData = initData();
      this.notes = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.weight_info {
  margin-left: 10px;
  color: #f56c6c;
  font-size: 12px;
}
</style>